<template>
	<view :style="{height: height + 'px'}">
		<scroll-view :style="{height: height + 'px'}" scroll-y="true" scroll-top="scrollTop" v-if="scrollshow"
			refresher-enabled="true" :refresher-triggered="refresherTriggered" @refresherrefresh="onRefresh()"
			@scrolltolower="loadMore">
			<slot></slot>
			<view class="loading" :class="boxHeight!=0?'loading_is':''" v-show="searchLoading">正在载入更多...</view>
			<view class="loading" :class="boxHeight!=0?'loading_is':''" v-show="searchLoadingComplete">已加载全部</view>
			<view class="loading" :class="boxHeight!=0?'loading_is':''" v-show="searchEmpty">暂无相关数据~</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			token: {
				type: Boolean,
				default: true
			},
			tabBar: {
				type: Boolean,
				default: false
			},
			diffHeight: {
				type: Number,
				default: 0
			},
			boxHeight: {
				type: Number,
				default: 0
			},
			first: {
				type: Boolean,
				default: true
			},
			initData: {
				type: Object,
				default: {
					url: '',
					param: {}
				}
			}
		},
		data() {
			return {
				height: 0, // 滚动区域的高度
				scrollTop: 0, // 滚动条位置
				page: 1, // 当前页码
				limit: 10, // 分页数量
				dataList: [], // 列表数据
				dataInfo: {}, // 列表其他信息
				dataParam: {}, // http数据参数
				scrollshow: false, //渲染组件

				refresherTriggered: false, // 当前下拉刷新状态，true已经被触发，false未被触发
				searchLoading: false, // "上拉加载"
				searchLoadingComplete: false, // "加载完毕"
				searchEmpty: false, // "暂无信息"
				loadtrue: true, //请求完毕
				_freshing: false, //方式刷新2次
				firstload: true, //第一次加载
			};
		},
		mounted() {
			let that = this
			this._freshing = false;
			this.dataParam = this.initData
			if(this.boxHeight == 0){
				uni.getSystemInfo({
					success: (res) => {
						let $height1 = this.customBar; // 状态栏 + 胶囊的高度
						let $height2 = res.screenHeight - res.safeArea.bottom; // 底部小黑条高度
						
						// #ifdef MP-WEIXIN
						this.height = res.windowHeight - $height2 - uni.upx2px(this.diffHeight)
						// #endif
						
						// #ifdef H5
						this.height = res.screenHeight - $height2 - uni.upx2px(this.diffHeight)
						// #endif
						
						this.scrollshow = true
					}
				})
			}else{
				this.height = uni.upx2px(this.boxHeight)
				this.scrollshow = true
			}
			if (this.first) {
				setTimeout(() => {
					that.onRefresh()
				}, 500)
			}

		},
		methods: {
			// 切换刷新数据
			oncutRefresh(res) {
				this.dataParam = res
				this._freshing = false;
				this.onRefresh()
			},
			// 下拉加载
			onRefresh(res) {
				if (res) {
					this.dataParam = res
				}
				this.page = 1
				this.dataList = []
				this.scrollTop = 0
				//第一次加载不转圈圈
				if (this.firstload) {
					this.firstload = false
				} else {
					this.refresherTriggered = true
				}
				this.searchLoadingComplete = false
				this.searchEmpty = false
				this.getList();
			},
			// 组件返回
			onfirst() {
				this.first = true
				this.onRefresh()
			},
			// 到底部触发
			loadMore() {
				// 有下一页并上一页已经加载完毕
				if (!this.searchLoadingComplete && this.searchLoading == false) {
					this.page++
					this.getList();
				}
			},
			// 获取列表
			getList() {
				//防止2次刷新
				if (this._freshing) return;
				this._freshing = true;
				//组件刚进页面不加载请求
				if (!this.first) return
				//开始加载
				this.searchLoading = true
				let that = this
				that.dataParam.param.page = that.page
				that.dataParam.param.limit = that.limit
				let httpdata = {
					url: that.dataParam.url,
					data: that.dataParam.param,
					token: that.token,
					load: true
				}
				if (that.dataParam.type) {
					httpdata.type = that.dataParam.type
				}
				if (that.dataParam.urlextend) {
					httpdata.urlextend = that.dataParam.urlextend
				}
				this.$Http(httpdata).then(res => {
					//解除2次刷新
					this._freshing = false;
					if (res.code == 1) {
						// 已全部加载完毕
						this.refresherTriggered = false
						this.searchLoading = false
						//没有数据得情况下
						if (res.data.data == null || res.data.data.length == 0) {
							this.searchEmpty = true
						} else {
							this.searchEmpty = false
						}
						//当有下一页数据得得情况下
						if (that.page >= res.data.all_page && !this.searchEmpty) {
							this.searchLoadingComplete = true
						} else {
							this.searchLoadingComplete = false
						}
						// 赋值
						if(that.dataParam.url == 'getCrsSocerList'){
							that.dataList = res.data.cardPointList
						}else{
							that.dataList = that.dataList.concat(res.data.data)
						}
						that.dataInfo = res.data.info ? res.data.info : {}
						that.dataInfo.count = res.data.count
						// 触发组件的dataRefresh事件
						that.$emit('dataRefresh', that.dataList)
						// 触发组件的infoRefresh事件
						that.$emit('infoRefresh', that.dataInfo)
					} else if (res.code === 0) {
						if (res.data === null) {
							// 赋值
							this.dataList = []
							this.refresherTriggered = false
							this.searchLoading = false
							this.searchEmpty = true
							this.searchLoadingComplete = false
							// 触发组件的dataRefresh事件
							that.$emit('dataRefresh', that.dataList)
							that.$emit('infoRefresh', {})
						} else {
							uni.showToast({ title: res.msg, icon: 'none' })
						}
					}
				});
			}
		},
	}
</script>

<style scoped>
	.loading { font-size: 28rpx; text-align: center; padding: 30rpx 0; color: #969696; }
	.loading_is{padding:0rpx !important;margin: 20rpx 0;}
</style>
